<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>手风琴</title>
		<link rel="icon" type="text/css" href="img/icon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--<link rel="stylesheet" type="text/css" href="css/手风琴动态.css"/>-->
	</head>
	<body>
		<style type="text/css">
		
			.accordion{
				width: 298px;
				min-height: 631px;
				/*max-height: 800px;*/
				background-color: #f5f5f5;
				border-top: 3px solid black;
				margin: 10px auto;
				padding-bottom: 45px;
			}
			.nav{
				width: 225px;
				min-height: 590px;
				/*max-height: 750px;*/
				border-left: 1px solid #cccccc;
				border-bottom: 1px solid #cccccc;
				border-right: 1px solid #cccccc;
				margin: auto;
			}
			h3{
				width: 222px;
				height: 46px;
				line-height: 16px; 
				padding: 16px 0 13px 25px;	
				border-top: 1px solid #dddddd;	
				background-image: linear-gradient(to top,#cecece 20%,#fdfdfd);
			}
			p{
				width: 222px;
				height: 34px;
				font-size: 14px;
				padding: 22px 0 0 28px;	
			}
			li:last-of-type{
				margin-bottom: 22px;
			}
			a{
				color: #666666;
			}
			.xhxian{
				text-decoration: underline;
			}
			
			.column{
			    width: 222px;
				height: 0px;
				overflow: hidden;
				transition-property: height;
				transition-duration: 0.8s;
			}
			input[type='radio']{
			    display: none;
			}
			input[type="radio"]:checked ~ .column{
			    height: 230px;
			}
			.item01{
				max-height: 174px;
			}
			.item02{
				max-height:140px;
			}
			.item03{
				max-height: 174px;
			}
			.item04{
				max-height: 250px;
			}

		</style>
		<div class="accordion">
			<div class="nav">
				<div class="item01">
					<input type="radio" id="radio01" name="outline"/>
					<label for="radio01"><h3> + 洋魔坊保障</h3></label>
					<ul class="column">
						<li><p><a href="">新手保障</a></p></li>
						<li><p><a href="">支付方式</a></p></li>
						<li><p><a href="">商家支持</a></p></li>
					</ul>	
				</div>	
				
				<div class="item02">
					<input type="radio" id="radio02" name="outline"/>
					<label for="radio02"><h3> - 新手帮助</h3></label>
					<ul class="column">
						<li><p><a href="">申请支付宝</a></p></li>
						<li><p><a href="">支付宝充值</a></p></li>
					</ul>	
				</div>
				
				<div class="item03">
					<input type="radio" id="radio03" name="outline"/>
					<label for="radio03"><h3> - 支付方式</h3></label>
					<ul class="column">
						<li><p><a href="">支付宝快捷支付</a></p></li>
						<li><p><a href="">支付宝余额支付</a></p></li>
						<li><p><a href="">新手入门</a></p></li>
					</ul>
				</div>	
				
				<div  class="item04">
					<input type="radio" id="radio04" name="outline"/>
					<label for="radio04"><h3> - 商家支持</h3></label>
					<ul class="column">
						<li><p><a href="">洋魔坊规则</a></p></li>
						<li><p><a href="">国际招商</a></p></li>
						<li><p><a href="" class="xhxian">服务商招募</a></p></li>
						<li><p><a href="">商家系统对接</a></p></li>
						<li><p><a href="">联系我们</a></p></li>
					</ul>	
				</div>
			</div>			
		</div>
	</body>
</html>
